<template>
  <div class="container">
    <header>
      <slot name="header"></slot>
    </header>
    <aside>
      <slot name="aside"></slot>
    </aside>
    <main>
      <slot></slot>
    </main>
    <footer>
      <!-- 作用域插槽：在某些场景下插槽的内容可能想要同时使用父组件域内和子组件域内的数据。要做到这一点，需要使用一种方法让子组件在渲染时将一部分数据提供给插槽。可以像对组件传递 prop 那样，向一个插槽的插口上传递 attribute -->
      <slot name="footer" :text="greetingMessage" :count="1" v-bind="item"></slot>
    </footer>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const greetingMessage = ref('哈喽')
const item = ref({
  name: '张三',
  age: 22,
  gender: 'male'
})
</script>

<style scoped>

</style>